<!DOCTYPE HTML>
<html>
<head>
    <title>Flask-SocketIO Test</title>
    <script src="jquery-3.5.1.min.js"></script>
    <script src="socket.io.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            // Connect to the Socket.IO server.
            // The connection URL has the following format, relative to the current page:
            //     http[s]://<domain>:<port>[/<namespace>]
            var socket = io('http://127.0.0.1:5001');

            // Event handler for new connections.
            // The callback function is invoked when a connection with the
            // server is established.
            socket.on('connect', function() {
                $('#log').append("<div>connected: " +socket.connected+ "<br>client: client connect!</div>");
            });

            socket.on('disconnect', function() {
                $('#log').append("<div>client: client disconnect!</div>");
            });

            socket.on('resp_add', function(data) {
                $('#log').append("<div>client: resp add "+JSON.stringify(data)+"</div>");
            });

            // Handlers for the different forms in the page.
            // These accept data from the user and send it to the server in a
            // variety of ways
            $('form#emit').submit(function(event) {
                $('#log').append("<div>Emit: 'add', {'a': 10, 'b': 15} </div>");
                socket.emit(
                    'add', {'a': 10, 'b': 15}
                );
                return false;
            });

            $('form#close').submit(function(event) {
                socket.close();
                return false;
            });
        });
    </script>
</head>
<body>
    <h1>Flask-SocketIO Test</h1>
    <form id="emit" method="POST" action='#'>
        <input type="text" name="emit_data" id="emit_data" placeholder="Message">
        <input type="submit" value="Echo">
    </form>
    <form id="close" method="POST" action="#">
        <input type="text" name="close_room" id="close_room" placeholder="Room Name">
        <input type="submit" value="Close Room">
    </form>
    <h2>Receive:</h2>
    <div id="log"></div>
</body>
</html>